<template>
  <div>
    <a-spin :spinning="loading">

    <div class="table-page-search-wrapper">
      <a-form layout="inline">
        <a-row :gutter="48">
          <a-col :md="8" :sm="24">
            <a-form-model-item label="上课日期：">
              <a-range-picker @change="changeDate" allowClear style="width:342px;" />
            </a-form-model-item>
          </a-col>
          <a-col :md="8" :sm="24">
            <a-form-model-item label="所在班级：">
              <a-select v-model="queryParam.class_id" allowClear placeholder="请选择所在班级" style="width:342px;">
                <a-select-option
                  v-for="(item,index) in class_"
                  :key="index"
                  :value="item.id"
                >{{item.name}}</a-select-option>
              </a-select>
            </a-form-model-item>
          </a-col>
          <a-col :md="8" :sm="24">
            <a-form-model-item label="授课课程：">
              <a-select v-model="queryParam.course_id" allowClear placeholder="请选择授课科目" style="width:342px;">
                <a-select-option
                  v-for="(item,index) in course"
                  :key="index"
                  :value="item.id"
                >{{item.name}}</a-select-option>
              </a-select>
            </a-form-model-item>
          </a-col>
          <div v-if="advanced">
            <a-col :md="8" :sm="24">
              <a-form-model-item label="上课教室：">
                <a-select v-model="queryParam.classroom_id" allowClear placeholder="请选择上课教室" style="width:342px;">
                  <a-select-option
                    v-for="(item,index) in classroom"
                    :key="index"
                    :value="item.id"
                  >{{item.name}}</a-select-option>
                </a-select>
              </a-form-model-item>
            </a-col>
          </div>
        </a-row>
      </a-form>
      <a style="cursor:pointer" v-if="advanced" @click="advanced = !advanced" id="moreButton">
        收起
        <a-icon type="up"></a-icon>
      </a>
      <a style="cursor:pointer" v-if="!advanced" @click="advanced = !advanced" id="moreButton">
        展开
        <a-icon type="down"></a-icon>
      </a>
    </div>
    <s-table
      ref="table"
      :rowKey="(record) => record.id"
      :columns="columns"
      :data="loadData"
      class="user_management_table"
    >
      <span slot="name" slot-scope="text,record">
        <a @click="routerPath(record.class.id)">{{record.class.name}}</a>
      </span>
      <span slot="time" slot-scope="text,record">
        {{record.attend_class_day}} &nbsp;&nbsp;&nbsp;
        {{record.start_time}}
        <span
          v-if="record.start_time&&record.end_time"
        >~</span>
        {{record.end_time}}
      </span>
      <span slot="actualNumber" slot-scope="text,record">
        <a @click="getOrderNameList(record.id)">{{text}}</a>
      </span>
    </s-table>
    <a-modal
      :visible="orderVisible"
      title="签到名单"
      @cancel="orderVisible=false"
      :footer="null"
      width="720px"
    >
      <a-table
        :columns="modalColumns"
        :dataSource="dataTable"
        :pagination="false"
        class="user_management_table"
        style="border:1px solid #e8e8e8;"
      >
        <span slot="name" slot-scope="text,record">
          <span v-if="record.student">{{record.student.name}}</span>
          <span v-else>--</span>
        </span>
        <span slot="phone" slot-scope="text,record">
          <span v-if="record.student">{{record.student.main_phone}}</span>
          <span v-else>--</span>
        </span>
        <span slot="classHour" slot-scope="text,record">
          <span>{{record.classHour||'--'}}</span>
        </span>
        <span slot="remarks" slot-scope="text,record">{{record.remarks}}</span>

        <span slot="type" slot-scope="text,record">
          <span v-if="record.type==1" style="color:rgb(153, 153, 153)">到课</span>
          <span v-else-if="record.type==2" style="color:rgb(153, 153, 153)">迟到</span>
          <span v-else-if="record.type==3" style="color: rgb(88, 183, 239);">请假</span>
          <span v-else-if="record.type==4" style="color:rgb(255, 103, 103)">未到</span>
          <span v-else style="color:rgb(153, 153, 153)">--</span>
        </span>
      </a-table>
    </a-modal>
    </a-spin>

  </div>
</template>

<script>
import { STable } from '@/components'
import { callRecords } from '@/api/homeSchool'
import { coursesList } from '@/api/courseCharge'
import { classList } from '@/api/class'
import { classroomList } from '@/api/classroom'
import { takeNameInfo } from '@/api/takeName'
export default {
  components: {
    STable
  },
  name: 'classRecord',
  props: {
    id: null
  },
  data() {
    return {
      loading:false,
      advanced:false,
      columns: [
        {
          title: '点名时间',
          dataIndex: 'created_at',
          width: 150,
          fixed: 'left',
          align: 'center'
        },
        {
          title: '班级名称',
          dataIndex: 'name',
          width: 150,
          fixed: 'left',
          align: 'center',
          scopedSlots: { customRender: 'name' }
        },
        {
          title: '授课课程',
          dataIndex: 'course_name',
          align: 'center'
        },
        {
          title: '上课时间',
          dataIndex: 'start_time',
          align: 'center',
          scopedSlots: { customRender: 'time' }
        },
        {
          title: '上课教室',
          dataIndex: 'classroom_name',
          align: 'center'
        },
        {
          title: '授课课时',
          dataIndex: 'class_hour',
          align: 'center'
        },

        {
          title: '实到人数',
          dataIndex: 'actual_number',
          align: 'center',
          scopedSlots: { customRender: 'actualNumber' }
          // takeNameInfo
        }
      ],
      queryParam: {
        school_id: this.$store.state.user.school,
        teacher_id: this.id,
        start_time: '',
        end_time: '',
        class_id: undefined,
        course_id: undefined,
        classroom_id: undefined
      },
      loadData: parameter => {
        if (this.id) {
          return callRecords(Object.assign(parameter, this.queryParam,{no_delete:true}))
            .then(res => {
              return res
            })
            .catch(err => {
              this.$message.error(err.data.message || '获取数据失败，请刷新页面或稍后再试')
            })
        } else {
          return
        }
      },
      course: [],
      class_: [],
      classroom: [],
      orderVisible: false,
      modalColumns: [
        {
          title: '学员姓名',
          dataIndex: 'name',
          width: 150,
          ellipse: true,
          scopedSlots: { customRender: 'name' }
        },
        {
          title: '手机号',
          dataIndex: 'phone',
          ellipse: true,
          scopedSlots: { customRender: 'phone' }
        },
        {
          title: '到课状态',
          dataIndex: 'type',
          ellipse: true,
          align: 'right',
          scopedSlots: { customRender: 'type' }
        },
        {
          title: '扣课时',
          dataIndex: 'class_hour',
          ellipse: true,
          align: 'right',
          scopedSlots: { customRender: 'classHour' }
        },
        {
          title: '备注',
          dataIndex: 'remarks',
          width: 200,
          ellipse: true,
          scopedSlots: { customRender: 'remarks' }
        }
      ],
      dataTable: []
    }
  },
  created() {
    coursesList({ school_id: this.$store.state.user.school, pageSize: 99999999 }).then(res => {
      this.course = res.data
    })
    classList({ school_id: this.$store.state.user.school, pageSize: 99999999, teacher_id: this.id }).then(res => {
      this.class_ = res.data
    })
    classroomList({ school_id: this.$store.state.user.school, pageSize: 99999999 }).then(res => {
      this.classroom = res.data
    })
  },
  methods: {
    routerPath(e) {
      this.$router.push({ name: 'class_info', query: { id: e } })
    },
    changeDate(date, dateString) {
      this.queryParam.start_time = dateString[0]
      this.queryParam.end_time = dateString[1]
    },
    getOrderNameList(e) {
      this.loading = true
      takeNameInfo(e).then(res => {
        this.dataTable = res.data
        this.orderVisible = true
      }).catch(err=>{
        if(err.data.message){
          this.$message.error(err.data.message)
        }else{
          this.$message.error('获取数据失败，请重试')
        }
      }).finally(()=>{
        this.loading = false
      })
    }
  },
  watch: {
    queryParam: {
      handler(newName, oldName) {
        this.$refs.table.refresh()
      },
      //immediate:true代表如果在 wacth 里声明了obj之后，就会立即先去执行里面的handler方法，
      immediate: false,
      deep: true // 开启深度监听，默认是false
    }
  }
}
</script>

<style lang="less" scoped>
#moreButton {
  position: absolute;
  top: 68px;
  right: 20px;
}
</style>